<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尚品汇</title>
    <link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="style/reset.css">
</head>
<body>
    <!-- 模仿body盒子 -->
    <div class="wrap">
        <!-- 购物车侧边栏 -->
        <!-- <div class ='toolBar'> -->
            <!-- 内容区 -->
            <!-- <div class="toolCon"></div> -->
            <!-- 按钮 -->
            <!-- <div class="toolBtn list"></div> -->
            <!-- 侧导航区 -->
            <!-- <div class="toolNav"> -->
                <!-- <ul> -->
                    <!-- <li> -->
                        <!-- <p></p> -->
                        <!-- <i>商品会员</i> -->
                    <!-- </li> -->
                <!-- </ul> -->
            <!-- </div> -->
        <!-- </div> -->
        <!-- 头部部分 -->
        <div class="header">
            <!-- 头部导航栏 -->
            <div class="headerNav">
                <div class="navMain">
                    <div class="mainLeft">
                        <h5>欢迎来到尚品汇！ 请</h5>
                        <p>
                            <a href="javascript:;">注册</a>
                            <a href="javascript:;" class="login">登录</a>
                        </p>
                    </div>
                    <div class="mainRight">
                        <a href="javascript:;">我的订单</a>
                        <a href="javascript:;">我的购物车</a>
                        <a href="javascript:;">我的尚品汇</a>
                        <a href="javascript:;">尚品汇会员</a>
                        <a href="javascript:;">企业采购</a>
                        <a href="javascript:;">关注尚品汇</a>
                        <a href="javascript:;">合作招商</a>
                        <a href="javascript:;">商家后台</a>
                    </div>
                </div>
            </div>
            <!-- 头部logo部分 -->
            <div class="headerLogo">
                <div class="logoCon">
                    <div class="logo">
                        <h1>
                            <a href="javascript:;">
                                <img src="images/Logo.png" alt="">
                            </a>
                        </h1>
                    </div>
                    <div class="search">
                        <input type="text">
                        <button>搜索</button>
                    </div>
                </div>

            </div>
        </div>
        <!-- 分类导航栏 -->
        <div class="typeNav">
            <div class="navCon">
                <div class="navLeft">
                    <h3>全部商品分类</h3>
                </div>
                <div class="navRight">
                    <a href="javascript:;">服装城</a>
                    <a href="javascript:;">美妆馆</a>
                    <a href="javascript:;">尚品汇超市</a>
                    <a href="javascript:;">全球购</a>
                    <a href="javascript:;">闪购</a>
                    <a href="javascript:;">团购</a>
                    <a href="javascript:;">有趣</a>
                    <a href="javascript:;">秒杀</a>
                </div>
            </div>
        </div>
        <!-- 商品主体区 -->
        <div class="content">
            <!-- 路径导航 -->
            <div class="conPoin">
                <!-- <a href="###">手机、密码、通讯</a>
                <i> / </i>
                <a href="###">手机</a>
                <i> / </i>
                <a href="###">Apple苹果</a>
                <i> / </i>
                <a href="###">iphone 6s系列</a> -->
            </div>
            <!-- 商品信息列表 -->
            <div class="infoWrap">
                <!-- 放大镜区域 -->
                <div class="prevViewWrap">
                    <!-- 放大镜 -->
                    <div class="prevView">
                        <!-- 小图容器 -->
                        <div class="zoomImgBox">
                            <img src="images/s1.png" alt="">
                            <!-- 蒙版 -->
                            <!-- <div class="mask"></div> -->
                        </div>
                        <!-- 大图容器 -->
                        <!-- <div class="bigImgBox">
                            <img src="images/b1.png" alt="">
                        </div> -->
                    </div>
                    <!-- 缩略图 -->
                    <div class="thumbnail">
                        <a href="javascript:;" class="prev">&lt;</a>
                        <div class="list">
                            <ul>
                                <!-- <li>
                                    <img src="images/s1.png" alt="">
                                </li>
                                <li>
                                    <img src="images/s2.png" alt="">
                                </li>
                                <li>
                                    <img src="images/s3.png" alt="">
                                </li>
                                <li>
                                    <img src="images/s1.png" alt="">
                                </li>
                                <li>
                                    <img src="images/s2.png" alt="">
                                </li>
                                <li>
                                    <img src="images/s3.png" alt="">
                                </li>
                                <li>
                                    <img src="images/s1.png" alt="">
                                </li>
                                <li>
                                    <img src="images/s2.png" alt="">
                                </li>
                                <li>
                                    <img src="images/s3.png" alt="">
                                </li> -->
                            </ul>
                        </div>
                        <a href="javascript:;" class="next">&gt;</a>
                    </div>
                </div>
                <!-- 商品信息区域 -->
                <div class="info">
                    <div class="infoTop">
                        <h3>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h3>
                        <p>推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
                        <div class="priceArea">
                            <div class="priceTop">
                                <p class="title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
                                <p class="priceCon">
                                    <i>￥</i>
                                    <em>5299</em>
                                    <span class="reduce">降价通知</span>
                                </p>
                                <p class="remark">
                                    <i>累计评价</i>
                                    <em>670000</em>
                                </p>
                            </div>
                            <div class="priceBottom">
                                <p class="title">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</p>
                                <p class="text">
                                    <em>加价购</em>
                                    <span>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</span>
                                </p>
                            </div>
                        </div>
                        <div class="support">
                            <div>
                                <p class="title">支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 持</p>
                                <p class="text">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</p>
                            </div>
                            <div>
                                <p class="title">配 &nbsp;送&nbsp; 至</p>
                                <p class="text">广东省 深圳市 宝安区</p>
                            </div>
                        </div>
                    </div>
                    <div class="choose">
                        <div class="choosed">
                            <!-- <mark>黑色
                                <a href="javascript:;">X</a>
                            </mark> -->
                        </div>
                        <div class="chooseArea">
                            <!-- <dl>
                                <dt>选择颜色</dt>
                                <dd>金色</dd>
                                <dd>银色</dd>
                                <dd>黑色</dd>
                            </dl>
                            <dl>
                                <dt>内存容量</dt>
                                <dd>16G</dd>
                                <dd>64G</dd>
                                <dd>128G</dd>
                                <dd>256G</dd>
                            </dl>
                            <dl>
                                <dt>选择版本</dt> 
                                <dd>公开版</dd>
                                <dd>移动版</dd>
                            </dl>
                            <dl>
                                <dt>购买方式</dt>
                                <dd>官方标配</dd>
                                <dd>优惠移动版</dd>
                                <dd>电信优惠版</dd>
                            </dl> -->
                        </div>
                        <div class="addCar">
                            <button class="add">+</button>
                            <button class="sea">-</button>
                        </div>
                        <div class="shop">加入购物车</div>
                    </div>
                </div>
            </div>
            <!-- 商品详情 -->
            <div class="detail">
                <!-- 侧边栏 -->
                <aside>
                    <div class="tabBtns">
                        <h4 class="active">相关分类</h4>
                        <h4>推荐品牌</h4>
                    </div>
                    <div class="tabContents">
                        <div class="active">
                            <ul class="partList">
                                <li>手机</li>
                                <li>手机壳</li>
                                <li>内存卡</li>
                                <li>ipone配件</li>
                                <li>贴膜</li>
                                <li>手机耳机</li>
                                <li>移动电源</li>
                                <li>平板电脑</li>
                            </ul>
                            <ul class="goodList">
                                <li>
                                    <div class="imgBox">
                                        <img src="images/part01.png" alt="">
                                    </div>
                                    <p class="partName">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="partPrice">¥6088.00</p>
                                    <div class="addCar">
                                        <a href="javascript:;">加入购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="imgBox">
                                        <img src="images/part01.png" alt="">
                                    </div>
                                    <p class="partName">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="partPrice">¥6088.00</p>
                                    <div class="addCar">
                                        <a href="javascript:;">加入购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="imgBox">
                                        <img src="images/part01.png" alt="">
                                    </div>
                                    <p class="partName">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="partPrice">¥6088.00</p>
                                    <div class="addCar">
                                        <a href="javascript:;">加入购物车</a>
                                    </div>
                                </li>
                                <li>
                                    <div class="imgBox">
                                        <img src="images/part01.png" alt="">
                                    </div>
                                    <p class="partName">Apple苹果iPhone 6s (A1699)</p>
                                    <p class="partPrice">¥6088.00</p>
                                    <div class="addCar">
                                        <a href="javascript:;">加入购物车</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </aside>
                <div class="detailWarp">
                    <div class="fitting">
                        <h4>选择搭配</h4>
                        <div class="goodSuits">
                            <div class="master">
                                <img src="images/l-m01.png" alt="">
                                <p>￥5299</p>
                                <!-- 采用定位 -->
                                <i>+</i>
                            </div>
                            <ul>
                                <li>
                                    <img src="images/dp01.png" alt="">
                                    <p>Feelsess费勒斯VR</p>
                                    <label for="">
                                        <input type="checkbox" value="50">
                                        <span>50</span>
                                    </label>
                                </li>
                                <li>
                                    <img src="images/dp02.png" alt="">
                                    <p>Feelsess费勒斯VR</p>
                                    <label for="">
                                        <input type="checkbox" value="50">
                                        <span>50</span>
                                    </label>
                                </li>
                                <li>
                                    <img src="images/dp03.png" alt="">
                                    <p>Feelsess费勒斯VR</p>
                                    <label for="">
                                        <input type="checkbox" value="50">
                                        <span>50</span>
                                    </label>
                                </li>
                                <li>
                                    <img src="images/dp04.png" alt="">
                                    <p>Feelsess费勒斯VR</p>
                                    <label for="">
                                        <input type="checkbox" value="50">
                                        <span>50</span>
                                    </label>
                                </li>
                            </ul>
                            <div class="result">
                                <div>已购0件商品</div>
                                <h5>套餐价</h5>
                                <p>￥5299</p>
                                <button>加入购物车</button>
                            </div>
                        </div>
                    </div>
                    <div class="intro">
                        <ul class="tabBtns">
                            <li class="active">商品介绍</li>
                            <li>规格包装</li>
                            <li>手机及保障</li>
                            <li>商品评价</li>
                            <li>手机社区</li>
                        </ul>
                        <div class="tabContents">
                            <div class="active">
                                <ul>
                                <li>分辨率：1920*1080(FHD)</li>
                                <li>后置摄像头：1200万像素</li>
                                <li>前置摄像头：500万像素</li>
                                <li>核 数：其他</li>
                                <li>频 率：以官网信息为准</li>
                                <li>品牌： Apple</li>
                                <li>商品名称：APPLEiPhone 6s Plus</li>
                                <li>商品编号：1861098</li>
                                <li>商品产地：中国大陆</li>
                                <li>商品毛重：0.51kg</li>
                                <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                <li>系统：苹果（IOS）</li>
                                <li>像素：1000-1600万品毛重：0.51kg</li>
                                <li>机身内存：64GB</li>
                                </ul>
                                <img src="images/intro01.png" alt="">
                                <img src="images/intro02.png" alt="">
                                <img src="images/intro03.png" alt="">
                            </div>
                            <div>规格包装</div>
                            <div>手机及保障</div>
                            <div>商品评价</div>
                            <div>手机社区</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/data.js"></script>
    <script>
        window.onload = function(){
            // 设置大图显示索引默认为0
             var prevViewId = 0;
            // 路径导航区
            Poin();
            function Poin(){
                // 获取父元素
                var conPoin = document.querySelector('.wrap .content .conPoin');
                // 获取数据
                var path = goodData.path;
                path.forEach(function (item,index){
                    var aNode = document.createElement('a');
                    aNode.innerHTML = item.title;
                    //判断当前元素是不是最后一个
                    if(index == path.length-1){
                        conPoin.appendChild(aNode);
                    }else{
                        var iNode = document.createElement('i');
                        iNode.innerHTML = '/';
                        conPoin.appendChild(aNode);
                        conPoin.appendChild(iNode);
                    }
                })
            }
            // 放大镜
            prevView();
            function prevView (){
                //获取父元素
                var prevViewNode = document.querySelector('.content .infoWrap .prevViewWrap .prevView');
                //获取小图容器
                var zoomImgBox = document.querySelector('.content .infoWrap .prevViewWrap .prevView .zoomImgBox');
                var maskNode = null;
                var bigImgBox = null;
                var bigImg = null;
                var imagessrc = goodData.imagessrc;
                //动态创建小图
                var smallImg = document.querySelector('.content .infoWrap .prevViewWrap .prevView .zoomImgBox img');
                smallImg.src = imagessrc[0].s;
                //绑定事件
                //移入事件
                zoomImgBox.onmouseenter = function(){
                    //隐士类型转换  需要布尔类型确认  null的布尔值是false
                    if(!maskNode){
                        // 如果是true的话  则执行创建蒙版
                        // 创建了一个蒙版 添加到小图容器中
                        var maskNode = document.createElement('div');
                        maskNode.className = 'mask';
                        zoomImgBox.appendChild(maskNode);
                        //大图放到大图容器中
                        bigImgBox = document.createElement('div');
                        bigImgBox.className = 'bigImgBox';
                        bigImg = new Image();
                        bigImg.src = imagessrc[prevViewId].b;
                        bigImgBox.appendChild(bigImg);
                        prevViewNode.appendChild(bigImgBox);
                    }
                    // 移动事件
                    zoomImgBox.onmousemove = function(event){
                        var maskPosition = {
                            left:event.clientX - prevViewNode.getBoundingClientRect().left- maskNode.offsetWidth/2,
                            top:event.clientY - prevViewNode.getBoundingClientRect().top - maskNode.offsetHeight/2,
                        }
                        // 边界值判断
                        if(maskPosition.left < 0){
                            maskPosition.left = 0;
                        }else if(maskPosition.left > prevViewNode.clientWidth - maskNode.offsetWidth){
                            maskPosition.left = prevViewNode.clientWidth - maskNode.offsetWidth;
                        }
                        if(maskPosition.top < 0){
                            maskPosition.top = 0;
                        }else if(maskPosition.top > prevViewNode.clientHeight - maskNode.offsetHeight){
                            maskPosition.top = prevViewNode.clientHeight - maskNode.offsetHeight;
                        }
                        maskNode.style.left = maskPosition.left+'px';
                        maskNode.style.top = maskPosition.top+'px';
                        var scale = (prevViewNode.clientWidth - maskNode.offsetWidth) / (bigImg.offsetWidth - bigImgBox.clientWidth);
                        // 计算大图的位置
                        var bigImgPosition = {
                            left:maskPosition.left / scale,
                            top:maskPosition.top / scale,
                        };
                        
                        bigImg.style.marginLeft = -bigImgPosition.left + 'px';
                        bigImg.style.marginTop = -bigImgPosition.top +'px';
                        
                    }
                    // 移出事件 
                    zoomImgBox.onmouseleave = function(){
                        //解绑事件
                        zoomImgBox.onmousemove = zoomImgBox.onmouseleave = null;
                        zoomImgBox.removeChild(maskNode);
                        prevViewNode.removeChild(bigImgBox);
                    // 重置变量
                        maskNode = null;
                        bigImgBox = null;
                        bigImg = null;
                    }
                }
            }
            // 缩略图
            thumbnail();
            function thumbnail(){
                // 获取左右按钮
                var prev = document.querySelector('.content .infoWrap .prevViewWrap .thumbnail > a.prev');
                var next = document.querySelector('.content .infoWrap .prevViewWrap .thumbnail > a.next');
                var list = document.querySelector('.content .infoWrap .prevViewWrap .thumbnail .list ul');
                // 缩略图动态渲染
                var imagessrc = goodData.imagessrc;
                // 数组的长度决定了li 和 img 的个数   数组当中每一个元素都是好对象  对象的s值属性 就是小图和缩略图的路径
                imagessrc.forEach(function(item){
                    var liNode = document.createElement('li');
                    var imgNode = new Image();
                    imgNode.src = item.s;
                    liNode.appendChild(imgNode);
                    list.appendChild(liNode);
                });
                var liNodes = document.querySelectorAll('.content .infoWrap .prevViewWrap .thumbnail .list ul li');
                //显示图片张数
                var showNum = 5;
                var moveNum = 2;
                var countLeft =(liNodes.length - showNum) * (liNodes[0].offsetWidth + 20);
                var itemLeft = moveNum * (liNodes[0].offsetWidth + 20);
                var tempLeft = 0;
                //给next按钮绑定单击事件 实现图片切换
                next.onclick = function(){
                    if(countLeft - tempLeft > 0){
                        if(countLeft - tempLeft > itemLeft){
                            tempLeft += itemLeft;
                        }else{
                            tempLeft = countLeft;
                        }
                        list.style.left = -tempLeft + 'px';
                    }
                }
                //给prev按钮绑定单击事件 实现图片切换
                prev.onclick = function(){
                    if(tempLeft > 0){
                        if(tempLeft > itemLeft){
                            tempLeft -= itemLeft;
                        }else{
                            tempLeft = 0;
                        }
                        list.style.left = - tempLeft + 'px';
                    }
                }
            }
            // 缩略图点击逻辑
            thumbnailClick();
            function thumbnailClick(){
                // 获取所有li
                var liNodes = document.querySelectorAll('.content .infoWrap .prevViewWrap .thumbnail .list ul li');
                // 获取小图元素(小图容器的每一个img图片)
                var smallImg = document.querySelector('.content .infoWrap .prevViewWrap .prevView .zoomImgBox img' );
                var imagessrc = goodData.imagessrc;
                //遍历li集合 绑定点击事件(涉及到集合的绑定 都要需要遍历循环获取)
                for(var i = 0; i < liNodes.length; i++){
                    // 遍历的时候从开始依次增加  每一个都增加一个index索引属性
                    liNodes[i].index = i;
                    liNodes[i].onclick = function(){
                        //将当前点击li的子元素img的src属性值设置给小图属性
                        // smallImg.src = this.firstElementChild.src;
                        // 把当前索引的小图路径属性设置给小图
                        smallImg.src = imagessrc[this.index].s;

                     // 因为我们不能在这个区域直接操作大图  要想能够点击到缩略图的时候   大图元素一定不存在
                     // 所以需要点击缩略图的时 保存点击的索引  然后创建大图时 使用这个索引
                        prevViewId = this.index;
                    }

                }

            }
            //商品信息筛选
            choose();
            function choose(){
                 //获取父元素
                var chooseArea = document.querySelector('.content .infoWrap .info .choose >.chooseArea');
                var choosed = document.querySelector('.content .infoWrap .info .choose >.choosed');
                var crumbData = goodData.goodsDetail.crumbData;
                // 定义完数组  需要遍历数组
                crumbData.forEach(function(item){
                    // 外层crumDate的元素
                    var dlNode = document.createElement('dl');
                    var dtNode = document.createElement('dt');
                    dtNode.innerHTML = item.title;
                    dlNode.appendChild(dtNode);
                    chooseArea.appendChild(dlNode);
                    item.data.forEach(function(item){
                        // 内层item的元素
                        var ddNode = document.createElement('dd');
                        ddNode.innerHTML = item.type;
                        ddNode.setAttribute('changeprice',item.changePrice);
                        dlNode.appendChild(ddNode);
                    })
                });
            var dlNodes = document.querySelectorAll('.content .infoWrap .info .choose .chooseArea >dl');
            var arr = new Array(dlNodes.length);
            arr.fill(0); // 与利用for循环赋值也可以
           
           for(var i = 0; i < dlNodes.length; i++){
               dlNodes[i].index = i;
               // 使用闭包 就是让函数执行多次
               // 这里就for循环没有作用域   不能保存当前状态  用闭包 匿名函数可以解决这个问题
               // 也可以通过es6里边的var 改成 let 来解决。
               (function(){
                   var ddNodes = dlNodes[i].getElementsByTagName('dd');
                   for(var j = 0; j < ddNodes.length;j++){
                       ddNodes[j].onclick = function(){
                           for(var i = 0; i<ddNodes.length;i++){
                               ddNodes[i].style.color = '#666';
                           };
                           this.style.color = 'red';
                           //传这个数组就是为了有序
                           arr[this.parentNode.index] = this;
                           priceSum(arr);
                           choosed.innerHTML = ''; // 清空数组
                           // 遍历选择结果数组  如果当前元素为0 忽略不管  如果有值 则使用该值作为mark标签的文本创建结果
                           arr.forEach(function(item,index){
                            if(item){
                                var markNode = document.createElement('mark');
                                markNode.innerHTML = item.innerHTML;
                                var aNode = document.createElement('a');
                                aNode.innerHTML = 'X';
                                aNode.setAttribute('num',index);
                                markNode.appendChild(aNode);
                                choosed.appendChild(markNode);
                            }
                           });
                           // 删除逻辑
                           var aNodes = document.querySelectorAll('.content .infoWrap .info .choose .choosed >mark >a');
                           // 循环绑定事件
                           for(var i = 0; i < aNodes.length; i++){
                               aNodes[i].onclick = function(){
                                   choosed.removeChild(this.parentNode);
                                   var index = parseInt(this.getAttribute('num'));
                                   arr[index] = 0;
                                   priceSum(arr);
                                   var ddNodes = dlNodes[index].getElementsByTagName('dd');
                                   for(var i = 0; i< ddNodes.length; i++){
                                       ddNodes[i].style.color = '#666';
                                   }
                                   ddNodes[0].style.color = 'red';
                                }
                           }
                       }
                   } 
               })();
           }
           //价格计算
           // 当arr数组中的内容发生改变时 则说明选项卡发生了变化 我们就需要重新计算价钱
           function priceSum(arr){
            //   获取商品原价
            var price = goodData.goodsDetail.price;
            //   获取价格元素
            var priceNode = document.querySelector('.content .infoWrap .info .infoTop p.priceCon >em');
                arr.forEach(function(item){
                    if(item){
                       price += parseInt(item.getAttribute('changeprice'));
                    }
                });
                priceNode.innerHTML = price;
                var masterPNode =document.querySelector('.content .detail .detailWarp .fitting .goodSuits .master > p');
                var checkNodes = document.querySelectorAll('.content .detail .detailWarp .fitting .goodSuits ul > li input');
                var resultPNode = document.querySelector('.content .detail .detailWarp .fitting .goodSuits .result > p');
                //这里是将选定的价格赋值给选择里面的价格
                masterPNode.innerHTML = '￥' + price;
                for(var i = 0;i<checkNodes.length;i++){
                    if(checkNodes[i].checked){
                        price += parseInt(checkNodes[i].value);
                    }
                }
                resultPNode.innerHTML = '￥' + price;
           }
        }
            //侧边栏切换
            asideTab();
            function asideTab(){
            // 获取集合
            var tabBtns = document.querySelectorAll('.content .detail aside .tabBtns >h4');
            var tabContents = document.querySelectorAll('.content .detail aside .tabContents >div');
            // 绑定点击事件
            for(var i = 0; i<tabBtns.length;i++){
                tabBtns[i].index = i; 
                tabBtns[i].onclick = function(){
                    //排它逻辑
                    for(var i = 0; i< tabContents.length;i++){
                    tabBtns[i].className = tabContents[i].className = '';
                }
                this.className = tabContents[this.index].className = 'active';
            }
        }
        }
            //选择搭配
            fitting();
            function fitting(){
            var masterPNode =document.querySelector('.content .detail .detailWarp .fitting .goodSuits .master > p');
            var checkNodes = document.querySelectorAll('.content .detail .detailWarp .fitting .goodSuits ul > li input');
            var resultPNode = document.querySelector('.content .detail .detailWarp .fitting .goodSuits .result > p');
        for(var i = 0; i < checkNodes.length; i++){
            checkNodes[i].onclick = function(){
            // 初始化价格，让每一次拿到都是最新的价格值
            // substr() 参数1 起始坐标包含关系  参数2 截取长度 
            var price = parseInt(masterPNode.innerHTML.substr(1));
              for(var i = 0; i<checkNodes.length;i++){
                if(checkNodes[i].checked){
                    // 这里从标签读出来的value  需要转一下数字
                    price += parseInt(checkNodes[i].value);
                }
            }
            resultPNode.innerHTML = '￥'+ price;
            }
        }
        }
            //选择搭配tab切换
            chooseTab();
            function chooseTab(){
            // 获取集合
            var tabBtns = document.querySelectorAll('.content .detail .detailWarp .intro .tabBtns >li');
            var tabContents = document.querySelectorAll('.content .detail .detailWarp .intro .tabContents >div');
            // 绑定点击事件
            for(var i = 0; i<tabBtns.length;i++){
                tabBtns[i].index = i; 
                tabBtns[i].onclick = function(){
                    //排它逻辑
                    for(var i = 0; i< tabBtns.length;i++){
                    tabBtns[i].className = tabContents[i].className = '';
                }
                this.className = tabContents[this.index].className = 'active';
            }
        }
        }
    }
    </script>
</body>
</html>